<template>
  <div class="nav_outer">
    <Header>就业顾问</Header>
    <div class="content" @click="change=false">
      <div class="consultant">
        <div class="avawrap">
          <img :src="consult.photo || defauava" alt />
        </div>
        <p class="name">{{consult.name}}</p>
        <div class="info" style="border-bottom: 1px solid #EFEFEF;">
          <img src="../assets/img/dianhua@2x.png" alt />
          <span>{{consult.phone}}</span>
        </div>
        <div class="info">
          <span class="mui-icon mui-icon-weixin"></span>
          <span>{{consult.phone}}</span>
        </div>
        <div class="mjbtn change" @click="changePerson">更换顾问</div>
        <div class="changebox" v-show="change" @click="stoppro">
          <div class="tleft" style="line-height:3">更换原因</div>
          <textarea name id cols="30" rows="6" placeholder="请输入" v-model="reason"></textarea>
          <div class="mjbtn sure" style="margin-top:0;" @click="sendPerson">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/commonComponents/Header";
export default {
  data() {
    return {
      change: false,
      reason: "",
      consult: {},
      defauava: require('../assets/img/ava@2x.png')
    };
  },
  created() {
    this.loadConsult();
  },
  methods: {
    changePerson(event) {
      event.stopPropagation();
      this.change = true;
    },
    loadConsult() {
      this.Http.get("/yzj/personal/app/tracker", null).then(res => {
        this.consult = res || {};
      });
    },
    sendPerson() {
      this.Http.post("/yzj/personal/app/change_tracker", {
        reason: this.reason
      }).then(res => {
        this.mui.toast('提交成功!');
      }, () => {});
      this.change = false;
    },
    stoppro(event){
      event.stopPropagation();
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
body {
  background: #f5f5f5 !important;
}
.content {
  text-align: center;
  .consultant {
    background: #fff;
    border-radius: 10px;
    margin: px2em(210) auto 0;
    width: px2em(540);
    padding-bottom: px2em(72);
    box-shadow: 0 0 20px #ddd;
    position: relative;
  }
  .name {
    font-size: 1.2em;
    font-weight: bold;
    color: #303030;
  }
  .info {
    height: px2em(140);
    line-height: px2em(140);
    margin: 0 px2em(100);
    color: #9a9a9a;
    > img {
      width: px2em(32);
      vertical-align: middle;
      margin-left: 2px;
    }
  }
  .avawrap {
    width: px2em(168);
    height: px2em(168);
    position: relative;
    top: - px2em(84);
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    > img {
      width: 100%;
    }
  }
  .change,
  .sure {
    height: px2em(76);
    line-height: px2em(76);
    border-radius: px2em(38);
    margin: px2em(72) px2em(90) 0;
    background: #5fa4ff;
  }
  .changebox {
    position: absolute;
    color: #858585;
    top: px2em(260);
    left: - px2em(23);
    width: px2em(586);
    box-sizing: border-box;
    padding: px2em(26);
    background: #fff;
    border-radius: 5px;
    > textarea {
      border: 1px solid #ccc;
      width: 100%;
      font-size: 14px;
    }
  }
}
</style>
